import Add from "../components/student/add.js";

let { $, table,layer,form } = layui;
export default class Student{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
        <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>学生管理</title>
        <!-- <link rel="stylesheet" href="../layui/css/layui.css" /> -->
        <style>
            .type {
                width: 100px;
            }
            .value {
                width: 300px;
            }
            .addForm{
                padding:20px;
            }
        </style>
    </head>
    <body>
        <table id="studentTable" lay-filter="studentTable"></table>
        <script type="text/html" id="tools">
                <form class="layui-form" lay-filter="searchForm">
              <div class="layui-input-inline">
                  <button type="button" class="layui-btn layui-btn-sm" lay-event="add">
                      <i class="layui-icon">&#xe654;</i>
                </button>
              </div>
                  <div class="layui-input-inline type">
                  <select name="type" >
                      <option value="name">姓名</option>
                      <option value="gender">性别</option>
                      <option value="age">年龄</option>
                    </select>
                  </div>
                  <div class="layui-input-inline value">
                      <input type="text" name="value" placeholder="请输入搜索条件" class="layui-input">
                  </div>
                  <div class="layui-input-inline">
                      <button type="button" lay-event="search" class="layui-btn layui-btn-primary layui-btn-sm">
                          <i class="layui-icon">&#xe615;</i>
                        </button>
                  </div>
            </div>
        </form>
        </script>
        <script type="text/html" id="action">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                >删除</a
            >
        </script>
        <script type="text/html" id="addStudentTemplate"></script>
    </body>
</html>
        `;
        $("#content").html(template);
    }
    handle(){
        table.render({
            elem: "#studentTable",
            url: "/students", //数据接口
            method: "get",
            toolbar: "#tools",
            page:true,
            limit:5,
            limits:[5,10,15,20,25],
            request: {
                pageName: 'current' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData:function(res){
                return {
                    code:0,
                    count:res.data.total,
                    data:res.data.rows
                }
            },
            cols: [
                [
                    //表头
                    {
                        field: "name",
                        title: "姓名",
                    },
                    { field: "gender", title: "性别" },
                    {
                        field: "age",
                        title: "年龄",
                    },
                    {
                        field: "cls",
                        title: "所属班级",
                        templet:function(d){
                            return d.cls ? d.cls.name : "";
                        }
                    },
                    {
                        title: "操作",
                        templet: "#action",
                    },
                ],
            ],
        });
        table.on('toolbar(studentTable)', function(obj){
            if(obj.event == "add"){
                new Add(obj);
            }else if(obj.event == "search"){
                // 搜索
                table.reload("studentTable",{
                    where:form.val("searchForm")
                });
            }
        })
        table.on('tool(studentTable)', function(obj){
            if(obj.event == "del"){
                console.log(obj.data._id);
                layer.confirm('是否删除?', function(index){
                    $.ajax({
                        type:"delete",
                        url:"/students/" + obj.data._id,
                        success(){
                            layer.close(index);
                            table.reload("studentTable");
                        }
                    });
                    
                });  
            }else if(obj.event == "edit"){
                layer.open({
                    type: 1, 
                    title:"修改学生",
                    btn:['确定','取消'],
                    success:function(){
                        $.ajax({
                            type:"get",
                            url:"/classes/all",
                            success(res){
                                let str = res.data.map((item) => `<option value="${item._id}">${item.name}</option>`)
                                            .join("");
                                $("[name=cls]").html(str);
                                form.render();
                                $.ajax({
                                    type:"get",
                                    url:"/students/" + obj.data._id,
                                    success(res){
                                        form.val("updateForm",res.data);
                                    }
                                });
                            }
                        });
                       
                        
                    },
                    yes:function(index){
                        $.ajax({
                            type:"put",
                            url:"/students/" + obj.data._id,
                            data:form.val("updateForm"),
                            success(){
                                table.reload("studentTable");
                                layer.close(index);
                            }
                        });
                       
                    },
                    content: `
                    <form class="layui-form addForm" lay-filter="updateForm" action="">
                        
                        <div class="layui-form-item">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="name"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入姓名"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-block">
                                <input
                                    type="text"
                                    name="age"
                                    required
                                    lay-verify="required"
                                    placeholder="请输入年龄"
                                    autocomplete="off"
                                    class="layui-input"
                                />
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">选择班级</label>
                            <div class="layui-input-block">
                                <select name="cls" >
                                   
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                            <input type="radio" name="gender" value="男" title="男">
                            <input type="radio" name="gender" value="女" title="女">
                            </div>
                        </div>
                    </form>
                    `
                });
            }
        })
    }
}